<template>
	<view>
		<view class="explan_ariticle">
			<view class="explan_ariticle_title">{{explanInfo.explanTitle}}</view>
			<view class="explan_ariticle_tag" >{{explanInfo.explanTag}}</view>
			<view class="explan_ariticle_desc" >{{explanInfo.explanDetail}}</view>
		</view>
		<view class="recommond_more">
			<view class="recommond_more_title">更多介绍</view>
			<jyfParser :html="explanInfo.explanReview" :isAll="true"></jyfParser>
		</view>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser'
	export default{
		components:{jyfParser},
		data(){
			return{
				explanInfo:{}
			} 
		},
		onLoad(options){
			if ('params' in options) {
			      let obj = JSON.parse(decodeURIComponent(options.params));
				  console.log(obj);
				  this.getExplan(obj.explanId)
			 }
		},
		methods:{
			getExplan(explanId){
				let param={}
				param.url='v3/consult/front/nounExplan/detail'
				param.data={
					explanId:  explanId
				}
				this.$request(param).then(res=>{
					console.log(res);
					this.explanInfo=res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
    .explan_ariticle{
		margin-top: 8rpx;
		padding:20rpx 28rpx ;
		background-color: #fff;
		.explan_ariticle_title{
			padding-left: 15rpx;
			font-size: 36rpx;
			color: rgb(51, 51, 51);
		}
		.explan_ariticle_tag{
			display: inline-block;
			font-size: 20rpx;
			border-radius: 5rpx;
			padding: 4rpx 8rpx;
			margin-left: 15rpx;
			color: rgb(167, 98, 82);
			background-color:#e3cec8;
			margin-top: 12rpx;
			margin-bottom: 20rpx;
		}
		.explan_ariticle_desc{
			font-size: 28rpx;
		}
	}	
	
	.recommond_more{
		padding: 18rpx 30rpx;
		margin-top: 10rpx;
		background-color: #fff;
		
		
		.recommond_more_title{
			padding-left: 20rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			position: relative;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 5rpx;
				width: 8rpx;
				height: 32rpx;
				background-color: rgb(155, 76, 58);
			}
		}
	}
	
</style>